<template>
  <h1>常用API</h1>
  <p>原生num：{{num}}</p>
  <p>调用myfun：{{myfun()}}</p>
  <p>原生转响应式非对象类型---<span style="color: red;">ref</span>---num2：{{num2}}</p>
  验证非对象类型num2是否是响应式的: <input type="text" v-model="num2">
<!--  <p>获取响应式num2的值-&#45;&#45;num3：{{num3(100)}}</p>-->
  <p>判断num2是否ref声明的---num4：{{num4}}</p>
  <p>原生对象obj：{{obj}}</p>
  <p>获取原生对象obj的值：{{obj.name}}---{{obj.age}}</p>
  <p>原生转响应式对象类型--<span style="color: red;">rea ctive</span>--obj2：{{obj2}}</p>
  验证对象类型obj2是否是响应式的--obj2.name: <input type="text" v-model="obj2.name"><br>
  验证对象类型obj2是否是响应式的--obj2.age: <input type="text" v-model="obj2.age">
  <p>获取响应式对象的值第一种方式obj2：{{obj2.name}}---{{obj2.age}}</p>
  <p>获取对象的值第二种方式obj3--无响应式：{{name}}---{{age}}</p>
  验证对象类型obj3是否是响应式的--name: <input type="text" v-model="name"><br>
  验证对象类型obj3是否是响应式的--age: <input type="text" v-model="age">
  <p>获取对象的值第3种方式obj4--无响应式...obj4：{{namex}}---{{agex}}</p>
  验证对象类型obj4是否是响应式的--namex: <input type="text" v-model="namex"><br>
  验证对象类型obj4是否是响应式的--agex: <input type="text" v-model="agex"><br>
  <p>获取对象的值第4种方式obj5--响应式...toRefs(obj5)：{{name5}}---{{age5}}</p>
  验证对象类型obj5是否是响应式的--name5: <input type="text" v-model="name5"><br>
  验证对象类型obj5是否是响应式的--age5: <input type="text" v-model="age5"><br>
  <p>获取对象的值obj6--无响应式readonly：{{obj6.name5}}---{{obj6.age5}}</p>
  验证对象类型obj6是否是响应式的--obj6.name5: <input type="text" v-model="obj6.name5"><br>
  验证对象类型obj6是否是响应式的--obj6.age5: <input type="text" v-model="obj6.age5"><br>
</template>

<script>
import { ref,reactive,toRefs,readonly,isRef } from 'vue';
export default {
  name: "ComApi",
  setup(){
    //原生数据不是响应式的
    let num = 2;
    let myfun = ()=>{
      num ++;
      console.log(num);
    }
    //原生转响应式  非对象类型 ref
    let num2 = ref(num);
    //判断num2是否ref声明的
    let num4 = isRef(num2)?true:false;
    // //获取响应式的值
    // let num3 = (n)=>{
    //   return num2.value = n
    // };
    //原生对象类型
    let obj = {
      name:'aaa',
      age:10
    }
    // 原生转响应式  对象类型
    let obj2 = reactive({
      name:'bbb',
      age:20
    })
    // 原生转响应式  对象类型 reactive
    let obj3 = reactive({
      name:'cccc',
      age:30
    })
    // 原生转响应式  对象类型
    let obj4 = reactive({
      namex:'ddd',
      agex:40
    })
    // 原生转响应式  对象类型
    let obj5 = reactive({
      name5:'ddd',
      age5:40
    })
    //再转回原生数据
    let obj6 = readonly(obj5);
    return {
      num,
      myfun,
      num2,
      num4,
      obj,
      // num3,
      obj2,
      name:obj3.name,//无响应式
      age:obj3.age,//无响应式
      ...obj4,//无响应式
      ...toRefs(obj5),//响应式
      obj6,
    }
  }
}
</script>

<style scoped>

</style>